/**
 * Created by Administrator on 2017/7/15.
 */
/**
 * Created by Administrator on 2017/4/6 0006.
 */
var React = require('react');

var Bheader = require('../widget/Bheader');
var ajax = require('../tools/ajax');
var Icon = require('../components/Icon');

module.exports = React.createClass({
    getInitialState: function () {
        return {
            theme:"Default", //Default/Blue
            tiyanOnce:[],//单条评论信息
            tiyanList:"",
            userInfo:[],
            commentList:""
        }
    },
    myScroll:"",

    componentDidMount: function () {
        this.getTiyanInfo();
        this.getComment();
        setTimeout(this.iscroll,500);
    },
    /**iScroll插件*/
    iscroll(){
        var p =this;
        p.myScroll = new IScroll("#tiyanInfoWrapper",{
            // 默认iscroll会拦截元素的默认事件处理函数，我们需要响应onClick，因此要配置
            preventDefault: false,
            // 禁止缩放
            zoom: false,
            // 支持鼠标事件，因为我开发是PC鼠标模拟的
            mouseWheel: true,
            // 滚动事件的探测灵敏度，1-3，越高越灵敏，兼容性越好，性能越差
            probeType: 3,
            // 拖拽超过上下界后出现弹射动画效果，用于实现下拉/上拉刷新
            bounce: true,
            // 展示滚动条
            scrollbars: false
        });
    },

    action:function () {
        // localStorage.setItem("shopId","1111");
    },
    getTiyanInfo(){
        var p =this;
        var tiyanId = localStorage.getItem("tiyanId");
        console.log(tiyanId);
        ajax("POST","getTiyanInfo",{Id:tiyanId},function(dt){
            if(dt&&dt.success){
                var objs = dt.data[0];
                console.log(objs);
                p.setState({tiyanOnce:objs},()=>{
                    p.getUserInfoByUid();
                });
            }
        })
    },
    //用户信息
    getUserInfoByUid(){
        var p = this;
        var userId = p.state.tiyanOnce.user_id;
        console.log(userId);
        ajax("POST","getUserInfoByUid",{userId:userId},function(dt){
            if(dt&&dt.success){
                console.log(dt);
                p.setState({userInfo:dt.data[0]});
            }
        })
    },
    //获取评论
    getComment(){
        var p=this;
        var comment_id = localStorage.getItem("tiyanId");
        ajax("POST","getComment",{comment_id:comment_id},function(dt){
            if(dt&&dt.success){
                var objs = dt.data;
                console.log(objs);
                var commentList = objs.map(function(obj){
                    return (
                        <div key={obj.Id} className="commentItem" style={{display:obj.comment?"block":"none"}}>
                            <div className="pic">
                                <img
                                    src={obj.photo?obj.photo:"http://115.29.198.39:8080/upload/app/857749830834048835.png"}/>
                            </div>
                            <div className="cmtlist">
                                <div className="name">{obj.nickname ? obj.nickname : obj.account}</div>
                                <p className="cmtInfo">{obj.comment}</p>
                            </div>
                        </div>
                    )
                });
                p.setState({commentList:commentList});
            }
        })
    },
    //发送评论
    send(){
        var p=this;
        var user_id = localStorage.getItem("userId");
        var comment = this.refs.comment.value;
        var comment_id = localStorage.getItem("tiyanId");
        var time = new Date().getTime();
        console.log(comment);
        ajax("POST","insertComment",{
            user_id:user_id,
            comment_id:comment_id,
            comment:comment,
            time:time
        },function(dt){
            console.log(dt);
            if(dt&&dt.success){
                p.getComment();
            }
        })
    },
    onfocus(){
        var commentBtn = this.refs.commentBtn;
        commentBtn.className = "commentBtn bottom";
        console.log(commentBtn);

    },
    render: function () {
        var p = this;
        var tiyanOnce = p.state.tiyanOnce;
        var userInfo = p.state.userInfo;
        if(tiyanOnce.photo){
            var picList = JSON.parse(tiyanOnce.photo).map(function(obj){
                return(
                    <img key={obj}  className="pinl_img" src={obj}/>
                )
            })
        }
        return (
            <div className="main"  id="main">
                <Bheader theme={p.state.theme} headr="false" title="体验专区" hact="#tiyan"></Bheader>
                <div id="tiyanInfoWrapper" className="container-t wrap">
                    <div style={{minHeight:"28.66rem"}}>
                    <div className="pinl-p">
                        <div className="pinl_logo">
                            <img src={userInfo.photo ? userInfo.photo:"http://115.29.198.39:8080/upload/app/857749830834048835.png"} />
                        </div>
                        <div className="pinl_con">
                            <p className="pinl_name">{userInfo.nickname?userInfo.nickname:userInfo.account}</p>
                            <p className="pinl_des">{tiyanOnce.content}</p>
                            <div className="pinl_shaitu">
                                {picList}
                            </div>
                            <div className="pinl_c">
                                <div className="tiyanBtn" onClick={p.UpdateZan} >
                                    <Icon className="zan" icon="#icon-dianzan"/>
                                    <span>{tiyanOnce.zan_number}</span>
                                </div>
                                <div className="tiyanBtn">
                                    <Icon className="share" icon="#icon-fenxiang"/>
                                    <span>{tiyanOnce.share_number}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="communication">
                        <div className="">精彩评论</div>
                    </div>
                    <div className="allcomment">
                        {p.state.commentList}
                    </div>
                    </div>
                </div>
                <div className="commentBtn" ref="commentBtn">
                    <div className="btn">
                        <Icon icon="#icon-bi"></Icon>
                        <input ref="comment" onFocus={p.onfocus} type="text" placeholder="写评论" maxLength="100" />
                        <div className="send" onClick={p.send}>发送</div>
                    </div>
                </div>
            </div>
        )
    }
});

